<!--  -->
<template>
  <div class="feed container">
    <!-- 上方菜单 -->
    <div class="main">
      <ul>
        <li
          @click="feed"
          class="main-feed"
          :class="{ active: isActive === 1 ? true : false }"
        >
          小宠饲养
        </li>
        <li
          @click="train"
          class="main-train"
          :class="{ active: isActive === 2 ? true : false }"
        >
          小宠训练
        </li>
        <li
          @click="medical"
          class="main-medical"
          :class="{ active: isActive === 3 ? true : false }"
        >
          小宠医疗
        </li>
      </ul>
    </div>
    <!-- 展示新闻区 -->
    <div class="news-display" v-for="item in petNews" :key="item.id">
      <aside>
        <img :src="item.newsImages" alt="" />
      </aside>
      <main>
        <strong class="news-title">{{ item.newsTitle }} </strong>
        <div class="like" :class="{ veryLikeclass: isLike }" @click="veryLike(item)">
          <i class="el-icon-s-opportunity">喜欢 </i>
        </div>
        <p>{{ item.newsText }}</p>
        <span class="updateTime"> 发布时间:{{ item.createTime | dateFormat }}</span>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: "Feed",
  data() {
    return {
      isActive: 1,

      petNews: [],
      petFeed: [],
      petTrain: [],
      petMedical: [],
      // 是否喜欢
      isLike: false,
    };
  },
  created() {
    this.getNewsList();
  },
  methods: {
    // 获取新闻列表
    async getNewsList() {
      const { data: res } = await this.$http.get(`/dqxmall/news/list?limit=100`);
      console.log("新闻列表", res);
      (this.petFeed = []), (this.petTrain = []), (this.petMedical = []);
      if (res.code !== 0) return this.$message.error("新闻列表获取失败");

      res.page.list.forEach((item) => {
        if (item.newsStatus) {
          if (item.type === "1") {
            this.petFeed.push(item);
          } else if (item.type === "2") {
            this.petTrain.push(item);
          } else if (item.type === "3") {
            this.petMedical.push(item);
          }
        }
      });
      this.petNews = this.petFeed;
    },
    feed() {
      this.isActive = 1;
      this.petNews = this.petFeed;
    },
    train() {
      this.isActive = 2;
      this.petNews = this.petTrain;
    },
    medical() {
      this.isActive = 3;
      this.petNews = this.petMedical;
    },
    // 点击喜欢
    async veryLike(data) {
      this.isLike = !this.isLike;
      if (this.isLike) {
        const { data: res } = await this.$http.post("/dqxmall/news/update", {
          id: data.id,
          likeCount: data.likeCount + 1,
        });
        if (res.code === 0) return;
      }
      if (!this.isLike) {
        const { data: res } = await this.$http.post("/dqxmall/news/update", {
          id: data.id,
          likeCount: data.likeCount - 1,
        });
        if (res.code === 0) return;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/total.less";

.main {
  display: flex;
  align-items: center;
  background-color: #ccc;
  ul {
    display: flex;
    align-items: center;
    li {
      height: 40px;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
      padding: 20px;
      cursor: pointer;
    }
    .main-feed,
    .main-train,
    .main-medical {
      &:hover {
        background-color: rgb(16, 67, 231);
        color: white;
        font-size: 33px;
      }
      &.active {
        background-color: rgb(16, 67, 231);
        color: white;
        font-size: 33px;
      }
    }
  }
}
.news-display {
  display: flex;
  justify-content: start;
  margin: 20px 0;
  aside {
    img {
      height: 250px;
      width: 350px;
    }
  }
  main {
    .news-title {
      height: 30px;
      font-size: 25px;
      cursor: pointer;
      margin: 20px;
      // &:hover {
      //   color: rgb(34, 196, 74);
      // }
    }
    .like {
      float: right;
      margin-right: 30px;
      cursor: pointer;
    }
    .veryLikeclass {
      color: rgb(255, 136, 0);
    }
    p {
      text-indent: 2em;
      line-height: 30px;
      font-size: 20px;
      margin: 20px;
    }
    .updateTime {
      float: right;
      display: inline-block;
      margin-bottom: 20px;
      margin-right: 30px;
    }
  }
}
</style>
